<template>
	<div class="list">
		<div class="tab">
			<el-table
				:data="allTableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="100">
				</el-table-column>
                <el-table-column
					label="发货单号"
					align='center'
					width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.order }}</span>
					</template>
				</el-table-column>
                <el-table-column
					label="货物类型"
					align='center'
					width="150">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
					</template>
				</el-table-column>
                <el-table-column
					label="设备名称"
					align='center'
					width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.device_type }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="开始时间"
					align='center'
					width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.start_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="结束时间"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.end_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="安全温度"
					align='center'
					width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.temp }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="温度记录"
					align='center'
                    width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.is_alert | is_alert }}</span>
					</template>
				</el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <a :href="'http://localhost:8000/down/?list=' + temp_list"> 下载记录</a>
                    </template>
                </el-table-column>
			</el-table>     
        </div>
        <div>
            <div id="map-test"></div>
            <div id='sdf'>
                <div id="main" style="width: 800px;height: 400px;"></div>
            </div>
        </div>
	</div>
</template>
<script>
import echarts from 'echarts'
import{get_order_info} from '../../api/api.js'
import { lazyAMapApiLoaderInstance } from 'vue-amap'

	export default {
		name:"list",
		data() {
			return {
				tableData:[], //数据
                allTableData:[],
                id:this.$route.query.id,
                path: [
                        {
                        path: [
                            [],
                            [],
                        ]
                        }
                    ],

                address1:0,
                address2:0,
                charts: '',
                opinionData:[],
                opinionData1:[],
                temp_list:[]

                
			}
        },
        filters:{           
            is_alert(type){
                if(type==0){
                    return "正常"
                }else{
                    return "报警"
                }
            },   
        },
		methods: {
            drawLine(time,date) {
                this.charts = echarts.init(document.getElementById('main'))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度数据']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
 
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        name:'Date',
                        data:time
                    
                    },
                    yAxis: {
                        type: 'value',
                        name:'°/c'
                    },
 
                    series: [{
                        name: '温度数据',
                        type: 'line',
                        data: date
                    }]
                })
            },

            
			//获取所有客户信息
            get_order_info() {
                var params = {
                    id:this.id
            };
            get_order_info(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                // console.log(res[0].send_address)
                this.temp_list = res[0].temperature
                this.address1 = (parseFloat(res[0].delivery_address.split(',')[0]))
                this.address2 = (parseFloat(res[0].delivery_address.split(',')[1]))
                this.path[0].path[0].push(parseFloat(res[0].send_address.split(',')[0]))
                this.path[0].path[0].push(parseFloat(res[0].send_address.split(',')[1]))
                this.path[0].path[1].push(parseFloat(res[0].delivery_address.split(',')[0]))
                this.path[0].path[1].push(parseFloat(res[0].delivery_address.split(',')[1]))
                console.log(this.path[0].path)
                // console.log(eval(res[0].temperature))
                for(let i=0,l=eval(res[0].temperature).length;i<l;i++){
                    this.opinionData.push(eval(res[0].temperature)[i].time)
                    this.opinionData1.push(eval(res[0].temperature)[i].temp)
                    
                }
                var time = this.opinionData
                var date = this.opinionData1
                var id = 'main'
                this.drawLine(time,date)
                // console.log(this.opinionData)
                // console.log(this.opinionData1)
                // drawLine(this.opinionData,this.opinionData1)
                // console.log(this.options2.datasets[0].data)

            })
            },
		},
		
        mounted() {
            
            this.get_order_info()
            lazyAMapApiLoaderInstance.load().then(() => {
            this.map = new AMap.Map('map-test', {
                // zooms: [13, 18], // 地图缩放范围
                center: new AMap.LngLat(this.address1, this.address2)
            })
            AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                if (!PathSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！')
                return
                }
                // 创建组件实例
                var pathSimplifierIns = new PathSimplifier({
                map: this.map,
                zIndex: 100, // 图层叠加顺序
                data: this.path, // 巡航路径
                // 获取巡航路径中的路径坐标数组
                getPath: (pathData, pathIndex) => {
                    return pathData.path
                }
                })
                // 创建巡航器
                var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
                loop: true, // 是否循环
                speed: 10000 // 速度(km/h)
                })
                pathNavigator.start()
            })
            })
        }
	}
</script>

<style scoped>
    #map-test{
        height:500px;
        width:700px;
        float: left;
        margin-top: 100px;
        /* margin-left: 10px; */
    }
    #sdf{
        height:1000px;
        width:800px;
        float: right;
        margin-top: 100px; 
        margin-right: 10px;

    }
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
    .schart {
        width: 100%;
        height: 300px;
    }
</style>